<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>
        <img src="map_black_bg.png" alt="">
        <div class="cycle1">
            <div class="cycle11 "></div>
            <div class="cycle11 cycle12"></div>
            <div class="cycle11 cycle13"></div>
        </div>
        <div class="cycle2">
            <div class="cycle22 "></div>
            <div class="cycle22  cycle23"></div>
            <div class="cycle22 cycle24"></div>
        </div>
        <div class="cycle3">
            <div class="cycle33 "></div>
            <div class="cycle33  cycle32"></div>
            <div class="cycle33 cycle34"></div>
        </div>
    </div>
</body>

</html>
<style>
    body {
        background-color: rgb(49, 49, 49);
    }
    
    div {
        position: relative;
        width: 747px;
        height: 617px;
        margin: auto
    }
    
    .cycle1 {
        position: absolute;
        top: 338px;
        right: 163px;
        width: 8px;
        height: 8px;
        background-color: rgb(83, 95, 255);
        border-radius: 50%;
    }
    
    .cycle1::after {
        content: '安徽';
        position: absolute;
        color: white;
        font-size: 12px;
        top: -5px;
        right: -35px;
    }
    
    .cycle11 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow: 0px 0px 5px rgb(83, 95, 255);
        animation-name: move;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    
    @keyframes move {
        0% {
            width: 8px;
            height: 8px;
            opacity: 0;
        }
        25% {
            width: 20px;
            height: 20px;
            opacity: 1;
        }
        50% {
            width: 40px;
            height: 40px;
            opacity: 1;
        }
        100% {
            width: 60px;
            height: 60px;
            opacity: 0;
        }
    }
    
    .cycle12 {
        animation-delay: 0.5s;
    }
    
    .cycle13 {
        animation-delay: 1s;
    }
    /* -------------------------bejing----------------------------- */
    
    .cycle2 {
        width: 8px;
        height: 8px;
        background-color: rgb(6, 175, 0);
        position: absolute;
        top: 266px;
        right: 195px;
        border-radius: 50%;
    }
    
    .cycle2::after {
        content: '北京';
        font-size: 12px;
        color: white;
        position: absolute;
        top: -5px;
        right: -35px;
    }
    
    .cycle22 {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 10px rgb(6, 175, 0);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: move;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        border-radius: 50%;
    }
    
    .cycle23 {
        animation-delay: 0.5s;
    }
    
    .cycle24 {
        animation-delay: 1s;
    }
    /* --------------------台湾------------------ */
    
    .cycle3 {
        width: 8px;
        height: 8px;
        background-color: rgb(255, 0, 0);
        position: absolute;
        top: 503px;
        right: 82px;
        border-radius: 50%;
    }
    
    .cycle3::after {
        content: '中国台湾';
        font-size: 12px;
        color: white;
        position: absolute;
        top: -10px;
        right: -45px;
    }
    
    .cycle33 {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 10px rgb(255, 0, 0);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: move;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        border-radius: 50%;
    }
    
    .cycle32 {
        animation-delay: 0.5s;
    }
    
    .cycle34 {
        animation-delay: 1s;
    }
</style>